﻿<template id="systemMenu">
	<div class="inner-container">
		<ul class="operateList">
			<li class="operateBtn" @click="openFormPage(true,1)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">添加主菜单</span></li>
			<li class="operateBtn" @click="openFormPage(true,2)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">添加子菜单</span></li>
			<li class="operateBtn" @click="openFormPage(true,3)"><img src="../../../assets/img/eidt.png" height="20" width="20" /><span class="operateTitle">修改</span></li>
			<li class="operateBtn" @click="DeleteMenu()"><img src="../../../assets/img/delete.png" height="20" width="20" /><span class="operateTitle">删除</span></li>
		</ul>
		<!--<queryForm style="padding:5px;" @Refresh="Refresh"></queryForm>-->
		<div style="padding:10px 10px 0px 10px">
			<el-table :data="menuList" highlight-current-row class="table" style="width: 100%" :height='tableHeight' @current-change="handleCurrentChange">
				
				<el-table-column label="组织名称" min-width="50%">
					<template scope="scope">
						<el-button :style="SetRowHeadLeft(scope.row)" @click="InsertTr(scope.$index, scope.row,scope)" type="text" showType="(0)" :class="scope.row.class">
						</el-button>
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<el-table-column property="code" label="编码" min-width="20%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="level" label="级别" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="sort" label="排序" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="url" label="Url地址" min-width="50%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="remark" label="备注" min-width="50%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="createTime" label="创建时间" min-width="50%" show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</div>
		<!--<pageBox style="margin-top:5px;"></pagebox>-->
		<el-dialog title="菜单" v-model="DiallogVisible" size="800px">
			<formPage v-if="DiallogVisible" :editData="editData" :btnType="btnType" :parentId="parentId" :level="level" ref="form" @Refresh="Refresh"></formPage>
		</el-dialog>
		<el-dialog title="配置按钮" v-model="buttonPageState" size="800px">
			<buttons ref="button" @Refresh="Refresh"></buttons>
			<span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
		</el-dialog>
	</div>
</template>
<script>
	import QueryForm from './Form/QueryForm.vue'
	import Form from './Form/Form.vue'
	import Buttons from './Form/Buttons.vue'
	import PageBox from '../../Common/Page1.vue'
	export default {

		components: {
			pageBox: PageBox,
			formPage: Form,
			queryForm: QueryForm,
			buttons: Buttons,
		},
		data() {
			return {
				pageInfo: {
					page: 1,
					pageSize: 9999
				},
				queryInfo: {},
				menuList: [],
				DiallogVisible: false,
				btnType: -1,
				level: 1,
				selectedRow: null,
				tableHeight: 600,
				editData: {
					menuName: "",
					menuCode: "",
					menuUrl: "",
					pathUrl: "",
					icon: "",
					//menuPid:"",
					//path:"",
					//Remark:"",
					//path:null,
					level: 1,
					createTime: "",
					hasChild: false,
					enabled: true,
					sortId: 1,
					parentId: null,
					statusValue: true,
					version: ""
				},
				parentId: null,
				buttonPageState: false,
			};
		},
		mounted() {
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				//得到初始高度
				let contentHeight = $('.content').height(),
					wrapListHeight = $('.operateList').height(),
					warpBoxHigeht = $('.list').height();
				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - 100;
				console.log(wrapListHeight, warpBoxHigeht, contentHeight, this.tableHeight)
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let contentHeight = $('.content').height(),
							wrapListHeight = $('.operateList').height(),
							warpBoxHigeht = $('.list').height();
						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - 100
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
			//获取菜单列表
			this.ajax({
				url: 'tSysMenu/getManageMenus',
				data: this.queryInfo,
				success: function(tree) {
					this.menuList = [];
					
					this.HandleTreeGrid(tree, this.menuList);
					this.menuList.forEach((item) => {
						item.class = this.GetIsOpenClass(item);
					});
				}
			});
		},
		methods: {
			handleCurrentChange(val) {
				this.selectedRow = val;
			},
			SetFormData() {
				this.ajax({
					url: 'tSysMenu/selectMenuById?id=' + this.selectedRow.id,
					success: function(data) {
						this.editData = data;
					}
				})
			},
			HandleTreeGrid(treeNode, menuList) {
				for(var item of treeNode) {
					menuList.push(item);
					if(item.children && item.children.length > 0) {
						if(item.childs == undefined) {
							item.childs = [];
						}
						item.isOpen = true;
						item.children.forEach((node) => {
							item.childs.push(node);
						});
						this.HandleTreeGrid(item.children, menuList);
					}
				}
			},
			SetRowHeadLeft(row) {
				return {
					'margin-left': ((parseInt(row.level) - 1) * 20) + 'px',
					'margin-right': ((parseInt(row.level)) * 5) + 'px'
				};
			},
			InsertTr(index, row, scope) {
				if(!row.isOpen) {
					if(row.childs && row.childs.length > 0) {
						this.InsertChildTableData(index, row);
					}
				} else {
					if(row.childs) {
						if(row.childs.length > 0) {
							this.RemoveChildTableData(index, row);
						}
					}
				}
			},
			GetIsOpenClass(row) {
				if(row.hasChild) {
					return {
						'el-icon-arrow-down': row.isOpen != undefined && row.isOpen == true,
						'el-icon-arrow-right': row.isOpen == undefined || row.isOpen == false
					};
				} else {
					return {
						'iocClose': true
					};
				}
			},
			DataFormatter(row, column) {
				if(row.enable == null || !row.enable) {
					return "否";
				} else {
					return "是";
				}
			},
			RemoveChildTableData(index, row) {
				let num = this.HandleRowChildCount(row);
				this.menuList.splice(index + 1, num);
				row.isOpen = false;
				row.class = this.GetIsOpenClass(row);
			},
			HandleRowChildCount(row) {
				if(row.childs != undefined && row.isOpen) {
					if(row.childs.length > 0) {
						let i = parseInt(row.childs.length)
						row.childs.forEach((item) => {
							i = i + this.HandleRowChildCount(item);
						});
						return i;
					} else {
						return 0;
					}
				} else {
					return 0;
				}

			},
			InsertChildTableData(index, row) {
				this.HandleAddChild(index, row);
				if(row.childs.length == 0) {
					row.hasChild = false;
				}
				row.isOpen = true;
				row.class = this.GetIsOpenClass(row);
			},
			HandleAddChild(index, row) {
				if(row.childs.length > 0) {
					row.childs.forEach((item, i) => {
						index = index + 1;
						this.menuList.splice(index, 0, item);
						if(item.isOpen && item.childs != undefined) {
							index = this.HandleAddChild(index, item);
						}
					})
					return index;
				}
			},
			//添加或编辑权限
			openFormPage(state, type) {
				if(type > 1) {
					if(this.selectedRow == null) {
						this.$message.error("请选择数据");
						return;
					} else if(type == 2 && this.selectedRow.level == 2){
                    	this.$message.error("不能添加多级子节点");
                        return;
                    	}else if(type == 3) {
						this.SetFormData(type);
					}
				}
				if(type == 2) {
					this.level = this.selectedRow.level + 1;
					this.parentId = this.selectedRow.id;
				}
				if(type == 1) {
					this.level = 1;
					this.parentId = null;
				}
				this.DiallogVisible = true;
				this.btnType = type;
			},
			openButtons() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				}
				this.buttonPageState = true;
			},
			Refresh(menuName) {
				this.DiallogVisible = false;
				var urls = "GetMenuByName";
				var query = {
					menuName: menuName
				};
				if(menuName == undefined || menuName == "") {
					query = this.queryInfo;
					urls = "getManageMenus";
				}
				this.ajax({
					url: 'tSysMenu/' + urls,
					data: {
						menuName: menuName
					},
					success: function(tree) {
						this.parentId = null;
						this.menuList = [];
						this.HandleTreeGrid(tree, this.menuList);
						this.menuList.forEach((item) => {
							item.class = this.GetIsOpenClass(item);
						});
					}
				});
			},
			DeleteMenu() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				} else if(this.selectedRow.childs && this.selectedRow.childs.length > 0) {
					this.$message({
						message: '警告，请先删除子节点',
						type: 'warning'
					});
				} else {
					this.$confirm('是否删除数据？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.ajax({
							url: 'tSysMenu/deleteMenu',
							type: 'post',
							data: {
								id: this.selectedRow.id
							},
							success: function(data) {
								this.Refresh();
							}
						});
					}).catch(() => {});
				}
			},
			SaveMenuButtons(buttonArray) {
				//保存菜单按钮配置
				this.ajax({
					url: 'SystemMenuButton/SaveMenuButton?menuId={0}'.format(this.selectedRow.id) + '&buttons={0}'.format(buttonArray),
					type: 'post',
					contentType: 'application/json',
					showMessage: "操作成功",
					success: function(data) {
						this.Refresh();
					}
				});

			},
		},
	}
</script>
<style scoped>
	.el-select-dropdown__wrap {
		margin-bottom: -15px !important;
	}
	
	.operateList {
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eae9e9;
		font-size: 0;
	}
	
	.operateBtn {
		font-size: 14px;
		display: inline-block;
		vertical-align: top;
		height: 20px;
		line-height: 20px;
		border-right: 1px solid #ddd;
		padding: 0 10px;
		margin: 5px 0;
		text-align: center;
		cursor: pointer;
		color: #666;
	}
	
	.operateBtn:last-child {
		border-right: none;
	}
	
	.operateTitle {
		vertical-align: top;
		padding-left: 4px
	}
	/*.el-table__header-wrapper > table > thead
{
    display: block !important;
}*/
	
	.el-table__body-wrapper {
		overflow-y: scroll;
		overflow-x: hidden;
	}
</style>